{{extend "func_demo_layout.html"}}

{{block sidemenu}}
{{<< sidemenu('FUNCMENU', 'generic/simple_list')}}
{{end}}

{{block content_main}}
<!-- 引入 rtable.js (riot-table)-->
{{use "ui.rtable"}}
{{use "ui.dataset"}}
<!-- 引入查询条件 -->
{{use "ui.query_condition"}}

<query-condition></query-condition>

<div class="tools">
  <a class="btn btn-flat btn-primary btn-sm" href="/func/add1" id="btnAddDialog"><i class="fa fa-plus"></i> 新增(对话框)</a>
  <div class="pull-right">
    <a class="btn btn-flat btn-info btn-sm" href="{{<< table.download_url()}}">下载</a>
  </div>
</div>

<rtable id="myrtable"></rtable>

<div class="clearfix tools">
  <div id="pagination" class="pull-left"></div>
</div>

<script>

  $(function(){

    //初始化数据，使用DataSet和rtable
    var data = new DataSet()
    var options = {
      tableClass: 'table table-bordered',
      onUpdate: function(data){
        $('#pagination').text('共 ' + data.length + ' 条记录')
      }
    }
    var cols = [
      {name:'id', title:'ID', width:40, align:'center'},
      {name:'subject', title:'标题'},
      {name:'author', title:'作者', width:80},
      {name:'created_time', title:'创建时间', width:160},
      {name:'modified_time', title:'修改时间', width:160},
      {name:'action', title:'操作', width:100, buttons: [
          {
            icon:'edit',
            title:'编辑',
            onclick:function (row) {
              var options = {
                onSuccess: function(dialog, d) {
                  data.update(d.data)
                }
              }
              dialog('/func/edit/'+row.id, options);
            }
          },
          {
            label:'删除',
            //title 省略了
            //href: '/func/simple_list/remove/',
            onclick:function (row) {
              data.remove(row, '/func/remove/'+row.id)
            }
          }
        ]
      }
    ]
    riot.mount('rtable', {cols:cols, options:options, data:data,
      indexCol:true, height:'auto', checkCol:true, multiSelect:true})
    var table = document.getElementById('myrtable')

    // 装入数据
    data.load('{{<< table.data_url}}', function(r){return r.rows})


    //初始化查询条件
    var query = {
        fields:[
          {name:'subject', type:'str', label:'主题：'},
          {name:'created_time', type:'date', label:'创建日期：', placeholder:'请输入日期'}
        ],
        layout: [
          ['subject', 'created_time'],
        ],
        data: {
        }
    }
    riot.mount('query-condition', query)

    //初始化弹出框
    $('#btnAddDialog').click(function(e){
      e.preventDefault();
      var options = {
        onSuccess: function(dialog, d) {
          data.add(d.data)
        }
      }
      dialog($(this).attr('href'), options);
    });

  })

</script>
{{end}}
